<template>
	<view class="content">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">选择人员</view>
			<view class="right" @click="finish">完成</view>
		</view>
		<view class="space"></view>
		<scroll-view scroll-y="true" class="body">
			<view @click="select(item)" v-for="(item, index) in list" :key="index" class="item flex-row">
				<text>{{ item.name }}</text>
				<uni-icons v-if="checkedIds.includes(item.id)" type="checkbox" size="20" color="#5F96F2"></uni-icons>
				<uni-icons v-else type="circle" size="20" color="#ccc"></uni-icons>
			</view>
			<view class="nodata">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
	components: { uniIcons },
	data: function () {
		return {
			page: 1,
			total: 1,
			list: [],
			checkedIds: [],
			checkedList: []
		}
	},
	onLoad:function(){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		this.getList();
	},
	onShow(){
		this.checkedIds = uni.getStorageSync("jobTicketSuperCheckedIds") || [];
		this.checkedList = uni.getStorageSync("jobTicketSuperCheckedList") || [];
	},
	methods:{
		// 返回
		goBack(){
			uni.navigateBack();
		},
		// 选择
		select(item){
			let id = item.id;
			if(this.checkedIds.includes(item.id)){
				this.checkedIds = this.checkedIds.filter(item=>item != id);
				this.checkedList = this.checkedList.filter(item=>item.id != id);
			}else{
				this.checkedIds = [id];
				this.checkedList= [item];
			}
		},
		// 完成
		finish(){
			uni.setStorageSync('jobTicketSuperCheckedIds', this.checkedIds);
			uni.setStorageSync('jobTicketSuperCheckedList', this.checkedList);
			uni.navigateBack();
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.jobTicketMemberList,
				header: this.$API.get_head(),
				data: { company: uni.getStorageSync('company') },
				success: (res)=>{
					_this.list = res.data.data;
				}
			})
		}
	}
}
</script>

<style>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.body{
	background: #fff;
	height: calc(100vh - 88upx - 20upx - var(--status-bar-height));
}

.space{
	width: 100%;
	height: 20upx;
	background: #F2F2F2;
}

.item{
	padding: 10upx 30upx;
	border-bottom: 2upx solid #eee;
}
.item text{
	color: #666;
	font-size: 32upx;
}


</style>
